import { Component } from '@angular/core';
import { AgRendererComponent } from '@ag-grid-community/angular';
import { ICellRendererParams } from '@ag-grid-community/core';
import { deepClone } from '../../../utils/utils';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { UploadFile } from '@shared/apes/upload';
import { toBoolean } from '@shared/apes/core/util/convert';

@Component({
  selector: 'apes-render-popover',
  template: `
    <!--[apesPopoverTitle]="titleTemplate"-->
    <div *ngIf="_fileList.length > 0" apes-popover apesPopoverPlacement="topLeft" [apesPopoverContent]="contentTemplate">
      {{this.formatter(params.value)}}
      <ng-template #contentTemplate>
        <apes-upload apesListType="picture-card"
                     [apesFileList]="fileList"
                     [apesShowButton]="false"
                     [apesRemove]="handleRemove"
                     [apesShowUploadList]="handleShowList()"
        ></apes-upload>
      </ng-template>
    </div>
    <div *ngIf="_fileList.length == 0">
      {{this.formatter(params.value)}}
    </div>
    <!--<ng-template #titleTemplate><i apes-icon apesType="close"></i> Title</ng-template>-->

  `,
  styles: [`

  `],
})
export class ApesRenderPopoverComponent implements AgRendererComponent {
  value: any;
  params: ICellRendererParams;
  valueFormatter = '';
  popoverFormatter = '';
  _fileList: any[] = [
    // {
    //   fileName: 'QQ截图20190114101913.jpg',
    //   iconType: 'thumbnail',
    //   id: '5eafb54488ecd61924a9dd10',
    //   isImageUrl: true,
    //   isUploading: false,
    //   linkProps: undefined,
    //   listItemNameCls: '{apes-upload-list-item-name: true, apes-upload-list-item-name-icon-count-1: true}',
    //   message: '上传错误',
    //   name: 'QQ截图20190114101913.jpg',
    //   showDownload: false,
    //   size: 337580,
    //   type: 'image/jpeg',
    //   url: 'fileserver/view/5eafb54488ecd61924a9dd10',
    // },
    // {
    //   fileName: 'onlyTPdefPJMC000615.png',
    //   id: '',
    //   name: 'onlyTPdefPJMC000615.png',
    //   size: 0,
    //   type: 'image/jpeg',
    //   url: 'http://10.2.0.88:80/defPJMC/000615/onlyTPdefPJMC000615.png',
    // },
  ];


  constructor(private  expressionService: ExpressionService) {
  }

  refresh(params: any): boolean {
    return false;
  }

  agInit(params: ICellRendererParams): void {
    this.params = params;
    if (params.hasOwnProperty('colDef')) {
      this.valueFormatter = deepClone(params.colDef['valueFormatter']);
      this.popoverFormatter = deepClone(params.colDef['popoverFormatter']);
    } else {
      this.valueFormatter = deepClone(params.column['colDef']['valueFormatter']);
      this.popoverFormatter = deepClone(params.column['colDef']['popoverFormatter']);
    }
    if(this.popoverFormatter){
      let expression = this.popoverFormatter ? this.popoverFormatter : 'false';
      let data = this.expressionService.evaluate(expression, {
        context: '',
        model: '',
        value: this.params['value'],
      });
      if(data){
        this._fileList = JSON.parse(data);
      }
    }
  }

  formatter(value: any) {
    let expression = this.valueFormatter ? this.valueFormatter : 'value.name';
    return this.expressionService.evaluate(expression, {
      context: '',
      model: '',
      value: value,
    });
  }

  get fileList() {
    return this._fileList || [];
  }

  handleRemove = (file: UploadFile) => {
    return false;
  };

  handleShowList = () => {
    let showList = {
      showPreviewIcon: true,
      showRemoveIcon: false,
      showDownloadIcon: true,
    };
    return showList;
  };
}
